import { Form, Input, Modal, Spin } from "antd";
import { useEffect, useRef, useState } from "react";
const AddRight = ({ right, open, onOk, onCancel }) => {
  const [addingRight, setAddingRight] = useState({ ...right });
  const [key, setKey] = useState(Math.random());
  const [loading, setLoading] = useState(false);
  const submitButton = useRef(null);
  useEffect(() => {
    setKey(Math.random());
    setAddingRight({ ...right });
  }, [right]);
  console.log(addingRight);

  return (
    <Modal
      key={key}
      title="新增权限"
      cancelText="取消"
      okText="确定"
      open={open}
      destroyOnClose={true}
      onOk={() => {
        submitButton.current.click();
      }}
      onCancel={onCancel}
    >
      <Spin
        spinning={loading}
        tip="正在提交..."
        size="large"
        fullscreen={true}
      ></Spin>
      <Form
        onFinish={() => {
          setLoading(true);
          onOk(addingRight);
          setLoading(false);
        }}
        labelCol={{
          span: 4,
        }}
        wrapperCol={{
          span: 14,
        }}
        layout="horizontal"
      >
        <Form.Item
          label="名称"
          name="name"
          rules={[{ required: true, message: "请输入名称" }]}
          validateFirst={true}
        >
          <Input
            value={addingRight.name}
            onChange={(e) =>
              setAddingRight({ ...addingRight, name: e.target.value })
            }
            placeholder="请输入"
          ></Input>
        </Form.Item>
        <Form.Item
          label="请求方法"
          name="requestMethod"
          rules={[
            {
              required: false,
              pattern: /^(GET|POST|PUT|DELETE)$/,
              message: "只能输入GET、POST、PUT、DELETE中的一种",
            },
          ]}
          validateFirst={true}
        >
          <Input
            value={addingRight.requestMethod}
            onChange={(e) =>
              setAddingRight({ ...addingRight, requestMethod: e.target.value })
            }
            placeholder="请输入"
          ></Input>
        </Form.Item>
        <Form.Item
          label="Url"
          name="url"
          rules={[
            {
              required: false,
              pattern: /^\/[a-zA-Z0-9]+(\/[a-zA-Z0-9]+)*$/,
              message: "请输入正确的Url格式",
            },
          ]}
          validateFirst={true}
        >
          <Input
            value={addingRight.url}
            onChange={(e) =>
              setAddingRight({ ...addingRight, url: e.target.value })
            }
            placeholder="请输入"
          ></Input>
        </Form.Item>
        <Form.Item
          label="序号"
          name={"no"}
          rules={[
            { required: true, message: "请输入序号" },
            ({ getFieldValue }) => ({
              validator(rule, value) {
                const no = getFieldValue("no");
                if (!no.toString().match(/^\d+$/)) {
                  return Promise.reject("序号只能是数字");
                }
                return Promise.resolve();
              },
            }),
          ]}
          validateFirst={true}
        >
          <Input
            value={addingRight.no}
            onChange={(e) =>
              setAddingRight({ ...addingRight, no: e.target.value })
            }
            placeholder="请输入"
          ></Input>
        </Form.Item>
        <Form.Item>
          <button
            style={{ display: "none" }}
            ref={submitButton}
            type="submit"
          ></button>
        </Form.Item>
      </Form>
    </Modal>
  );
};

export default AddRight;
